<template>
	<view>


		<view class="navgator" :style="{'padding-top':statusHeight + 'px'}">
			<image mode="widthFix" src="../../static/f1.png" class="menu" @click="closeBack"></image>
			<view class="center">
				<label class="title">{{currWallet.name}}</label>

			</view>

			<label class="titleLabel">代币概况</label>
			<!-- <image mode="widthFix" src="../../static/im155.png" class="scan" ></image> -->
		</view>
		<view class="all">
			<view class="main">
				<view class="tableBar">
					<view :class="['tableItem', tabIndex== i ? 'borderBottom' : '']" v-for="(item,i) in tabList"
						:key="i" @click="selectTab(i)">
						{{item.tab}}
					</view>
				</view>

				<view class="content">
					<view class="item" v-for="(item,i) in transactionList" @click="toXiangqing(item)">
						<image class="itemImge" mode="widthFix" src="../../static/transferToIcon.png"
							v-if="item.type  ==1 & item.status==1 "></image>
						<image class="itemImge" mode="widthFix" src="../../static/transferOutIcon.png"
							v-if="item.type ==2 & item.status==1"></image>
						<image class="itemImge" mode="widthFix" src="../../static/img199.png" v-if="item.status==0">
						</image>
						<image class="itemImge" mode="widthFix" src="../../static/jinggao.png" v-if="item.status==-1">
						</image>

						<view class="right">
							<view class="labelAndmoney">
								<view class="LabelContent">
									<label class="addr">{{item.type==1 ? item.inAddr : item.outAddr}}</label>
									<label class="date">{{item.showTime}}</label>
								</view>

								<view class="rightview">
									<label
										:class="item.type==1?'moneyGreen':'moneyBlue'">{{item.type==1?'+': '-'}}{{item.money}}</label>
									<label class="dengdai" v-if="item.status==0">等待确认</label>
								</view>
							</view>
							<view class="line" v-if="item.status==0"></view>
						</view>
					</view>

				</view>

				<view class="bottom">
					<view class="btn duihuan" @click="openPop" :style="`width:${width}%;`"
						v-if="currWallet.parent == 'ETH'">兑换 <image class="xiabiao" src="../../static/tri.png"
							mode="widthFix"></image>
					</view>
					<view class="btn green" @click="toFrom" :style="`width:${width}%;`">收款</view>
					<view class="btn blue" @click="toPay" :style="`width:${width}%;`">转账</view>
				</view>
			</view>
		</view>



		<uni-popup ref="popups" type="bottom" background-color="#F0F0F0">
			<view class="popup">
				<view class="msgItem" >
					<image class="success" src="../../static/img34.png" mode="widthFix"></image>
					<view class="labelView"  @click="toLiulan">
						<label class="popmsg">兑换 ETH</label>
						<label class="popaddr" >使用 Tokenlon 闪电兑换</label>
				
					</view>
					<image src="../../static/right4.png" mode="widthFix" class="ri"></image>
				</view>
				
				<view class="cancle" @click="closePop">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Navgator from '../../componts/navgator.vue'

	export default {
		components: {
			Navgator
		},
		data() {
			return {
				currWallet: {},
				tabIndex: 0,
				tabList: [{
						tab: "全部"
					},
					{
						tab: "转出"
					},
					{
						tab: "转入"
					},
					{
						tab: "失败"
					},
				],
				transactionList: [],
				status: '',
				type: '',
				chain_type: 0,
				coin_type: 0,
				timer: null,
				width: 49

			}

		},
		onLoad(options) {
			var that = this
			console.log(options)

			this.currWallet = JSON.parse(options.currWallet)
			if (this.currWallet.name == "ETH" && this.currWallet.parent == 'ETH') {
				console.log("E链记录")
				this.chain_type = 1
				this.width = 30
				this.coin_type = 1
			} else if (this.currWallet.name == "TRX" && this.currWallet.parent == 'TRX') {
				console.log("T链记录")
				this.chain_type = 2
				this.width = 49
				this.coin_type = 1
			} else if (this.currWallet.name == "USDT" && this.currWallet.parent == 'ETH') {
				console.log("E链USDT记录")
				this.chain_type = 1
				this.coin_type = 2
				this.width = 30
			} else if (this.currWallet.name == "USDT" && this.currWallet.parent == 'TRX') {
				console.log("T链USDT记录")
				this.chain_type = 2
				this.coin_type = 2
				this.width = 49
			}
			// if (options.name == "USDT") {
			// 	this.currWallet.name = options.name
			// 	this.chain_type = 2
			// } else {
			// 	if (options.name == 'ETH') {
			// 		this.chain_type = 1
			// 	} else {
			// 		this.chain_type = 2
			// 	}
			// let res = uni.getStorageSync("userInfo")
			// console.log(res)
			// let list = res.walletList.filter(item => {
			// 	return item.name == options.name
			// })
			// this.currWallet = list[0]



			//}
			this.getTransaction()
			this.timer = setInterval(function() {
				that.getTransaction()
			}, 1000)

			uni.$on('getTransaction', data => {
				this.timer = setInterval(function() {
					that.getTransaction()
				}, 1000)
			})
		},

		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {

			openPop() {
				this.$refs.popups.open()

			},
			closePop(){
				this.$refs.popups.close()
			},
			selectTab(index) {
				this.tabIndex = index
				this.getTransaction()
			},
			async getTransaction() {
				let token = uni.getStorageSync('token');
				if (this.tabIndex == 3) {
					this.status = -1
					this.type = ''
				} else if (this.tabIndex == 0) {
					this.status = ''
					this.type = ''
				} else if (this.tabIndex == 1) {
					this.status = ''
					this.type = 2
				} else if (this.tabIndex == 2) {
					this.status = ''
					this.type = 1
				}

				let result = await new this.Request(this.Urls.m().getTransaction +
						`?limit=1000&page=1&status=${this.status}&type=${this.type}&chain_type=${this.chain_type}&coin_type=${this.coin_type}`
					)
					.modeGet()


				let temp = result.data.data.list

				if (this.currWallet.name == "ETH" && this.currWallet.parent == 'ETH') {

					this.transactionList = temp.filter(item => {
							return item.chain_type == 1 && item.coin_type == 1
						}

					)

				} else if (this.currWallet.name == "TRX" && this.currWallet.parent == 'TRX') {

					this.transactionList = temp.filter(item => {
							return item.chain_type == 2 && item.coin_type == 1
						}

					)
				} else if (this.currWallet.name == "USDT" && this.currWallet.parent == 'ETH') {

					this.transactionList = temp.filter(item => {
							return item.chain_type == 1 && item.coin_type == 2
						}

					)
				} else if (this.currWallet.name == "USDT" && this.currWallet.parent == 'TRX') {

					this.transactionList = temp.filter(item => {
							return item.chain_type == 2 && item.coin_type == 2
						}

					)
				}


				for (let item of this.transactionList) {

					item.inAddr = item.tra_en_address.substring(0, 6) + '...' + item.tra_en_address.substring(
						item.tra_en_address.length - 6, item.tra_en_address.length)

					item.outAddr = item.tra_out_address.substring(0, 6) + '...' + item.tra_out_address.substring(
						item.tra_out_address.length - 6, item.tra_out_address.length)

					item.money = parseInt(item.money)
					item.showTime = this.initTime(item.create_time)
				}

			},

			initTime(time) {

				let YMD = time.split(' ');
				let YMDList = YMD[0].split('-')
				let initTime = YMDList[0] + "/" + YMDList[1] + '/' + YMDList[2] + "/" + " " + YMD[1]

				return initTime

			},
			toPay() {
				if (this.timer) {
					console.log("清楚定时器", )
					clearInterval(this.timer);
					this.timer = null;
				}
				this.Api.go_to('/pages/pay/pay?currWallet=' + JSON.stringify(this.currWallet))

			},
			toFrom() {
				if (this.timer) {
					console.log("清楚定时器", )
					clearInterval(this.timer);
					this.timer = null;
				}
				this.Api.go_to('/pages/inMoney/inMoney?currWallet=' + JSON.stringify(this.currWallet))
			},
			toLiulan(){
				this.Api.go_to('/pages/tokenlon/tokenlon')
			},
			closeBack() {
				uni.$emit("getUserInfo")
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
				this.Api.back()
			},
			toXiangqing(item) {
				if (this.timer) {
					console.log("清楚定时器", )
					clearInterval(this.timer);
					this.timer = null;
				}


				this.Api.go_to("/pages/xiangqing/xiangqing?item=" + JSON.stringify(item))
			},
			scanCode() {

			}
		},
		computed: {
			//状态栏高度
			statusHeight() {
				return uni.getSystemInfoSync().statusBarHeight + 20 || 10; //如果没有获取到高度，那么指定10px；
			}
		},
	}
</script>

<style scoped>
	.navgator {
		background-color: #F7F7F7;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		height: 120rpx;
		padding: 40rpx 40rpx;
		border-bottom: 1rpx #F3F3F3 solid;

	}

	.menu {
		width: 40rpx;

	}

	.scan {
		width: 50rpx;


	}

	.center {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.all {
		width: 100vw;

		background-color: #EEEEEE;
		padding-top: 20rpx;
		display: flex;
		box-sizing: border-box;
	}

	.main {
		width: 100%;
		background-color: #FFF;
	}

	.tableBar {
		width: 100%;
		height: 80rpx;
		border-bottom: 1px #F7F7F7 solid;
		flex-direction: row;
		display: flex;
		box-sizing: border-box;
	}

	.tableItem {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.borderBottom {
		border-bottom: 2rpx #000 solid;
	}

	.content {
		width: 100%;
		height: calc(100vh - 300rpx);
		overflow-y: scroll;

	}

	.bottom {
		width: 100%;
		height: 100rpx;
		border-top: 1px #F7F7F7 solid;
		position: fixed;
		bottom: 20rpx;
		display: flex;
		padding: 10rpx;
		box-sizing: border-box;
		flex-direction: row;
		justify-content: space-between;

	}

	.btn {

		height: 100rpx;
		line-height: 100rpx;
		color: white;
		box-sizing: border-box;
		border-radius: 10rpx;
		text-align: center;
	}

	.green {
		background-color: #18B2CA;
	}

	.blue {
		background-color: #1277DF;
	}

	.duihuan {
		background-color: white;
		border: 1rpx #EEE solid;
		color: black;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.xiabiao {
		width: 30rpx;
	}

	.content {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		flex-direction: column;


	}

	.item {
		width: 100%;
		display: flex;
		padding: 40rpx 20rpx;
		flex-direction: row;
		box-sizing: border-box;
		border-bottom: 1px #F7F7F7 solid;
	}

	.itemImge {
		width: 60rpx;
	}

	.LabelContent {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
	}

	.addr {
		font-size: 40rpx;
	}

	.date {
		color: #D7D7D7;
		font-size: 25rpx;
		margin-top: 20rpx;

	}

	.moneyGreen {
		font-size: 35rpx;
		color: #18B2CA;
	}

	.moneyBlue {
		font-size: 35rpx;
		color: #1277DF;
	}

	.rightview {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		color: #D7D7D7;
		font-size: 20rpx;
		text-align: right;
	}

	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.line {
		width: 100%;
		height: 6rpx;
		margin-top: 30rpx;
		background-color: #B6DEFF;
	}

	.labelAndmoney {
		width: 100%;
		display: flex;
		flex-direction: row;
	}

	.titleLabel {
		font-size: 30rpx;
		color: #1277DF;
	}

	.popup {

		height: 20vh;
		display: flex;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		flex-direction: column;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		align-items: center;

	}
	.msgItem{
		width: 100%;
		display: flex;
		flex-direction: row;
		padding:40rpx 40rpx;
		align-items: center;
		justify-content: center;
		background-color: white;
		box-sizing: border-box;
		border-radius: 10rpx;
		height: 160rpx;
		
	}
	.success{
		width: 50rpx;
		margin-right: 40rpx;
	}
	.labelView{
		flex: 1;
		display: flex;
		flex-direction: column;
		
	}
	.popmsg{
		font-size: 35rpx;
	}
	.popaddr{
		font-size: 30rpx;
		margin-top: 10rpx;
		color: #77788A;
	}
	.ri{
		width: 30rpx;
	}
	.cancle{
		width: 100%;
		display: flex;
		flex-direction: row;
		padding:40rpx 40rpx;
		align-items: center;
		justify-content: center;
		background-color: white;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin-top: 20rpx;
		height: 160rpx;
	}
</style>
